<template>
  <div class="annotation-text-container">
    <el-input
      v-model="text"
      resize="none"
      :autofocus="true"
      type="textarea"
      class="input"
      placeholder="请输入批注内容"
      :maxlength="1000"
      :rows="7"
    />
    <div class="tool-box flex-between">
      <span>{{ text.length }}/1000</span>
      <div class="action-box flex">
        <el-button size="large" @click="onCancel('cancel')">取消</el-button>
        <el-button size="large" type="primary" @click="onSave('save-img')"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  value: {
    default: ''
  }
})
const text = ref(props.value)
const emit = defineEmits(['cancel', 'update'])

const onCancel = () => {
  emit('cancel')
}
const onSave = () => {
  emit('update', text.value)
}
</script>

<style scoped lang="less">
.annotation-text-container {
  width: 100%;
  background-color: #fafafa;
  border-radius: 10px;
  padding: 20px;
  .input {
    height: 180px;
    width: 100%;
    :deep(.el-textarea__inner) {
      background-color: #fafafa;
    }
  }
}
</style>
